{#
/**
 * Render the modals for subquestions/answers label sets, quick add, save as label set
 */
#}

<!-- quickaddModal -->
<div class="modal fade labelsets-update" id="quickaddModal" tabindex="-1" role="dialog" aria-labelledby="quickaddModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ gT('Quick-add labels') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>
                    {{ gT('Enter one label per line. You can provide a code by separating code and label text with a semicolon or tab. For multilingual surveys you add the translation(s) on the same line separated with a semicolon or tab. Please remember to use the save button after applying the changes.') }}
                </p>
                <textarea id='quickaddarea' class='tipme form-control' title='' cols='100' rows='10'></textarea>
            </div>
            <div class="modal-footer">
                <button class='btn btn-cancel' id='btnqacancel' type='button'  data-bs-dismiss="modal">{{ gT('Cancel') }}</button>
                <button class='btn btn-outline-secondary' id='btnqareplace' type='button'>
                    {{ gT('Replace') }}
                </button>
                <button class='btn btn-primary' id='btnqainsert' type='button'>
                    {{ gT('Add') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!--labelset browser Modal -->
<div class="modal fade labelsets-update" id="labelsetbrowserModal" tabindex="-1" role="dialog" aria-labelledby="labelsetbrowserModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ gT('Manage label sets') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row" id="labelsetsLoader">
                        <div class="ls-flex ls-flex-column align-items-center align-content-center" style="height: 200px;">
                            <div class="loader--loaderWidget ls-flex ls-flex-column align-content-center align-items-center" style="min-height: 100%;">
                                <div class="ls-flex align-content-center align-items-center">
                                <div class="loader-adminpanel text-center">
                                    <div class="contain-pulse animate-pulse">
                                        <div class="square"></div>
                                        <div class="square"></div>
                                        <div class="square"></div>
                                        <div class="square"></div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="labelsetsModalContent" style="display: none;">
                        <div class="row" id="labelsetsSelectorContainer">
                            <div class="col-12">
                                <label for="labelsets">{{ gT('Label sets list') }}</label>
                            </div>
                            <div class="col-12">
                                <select id='labelsets' size='10' style='width:250px;'>
                                    <option>--{{ gT('Label sets') }}--</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div id="labelsetalert" class="col-12" style="display: none;"></div>
                            <div id='labelsetpreview' class="col-12 ls-space margin top-15" >
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button class='btn btn-cancel' id='btnqacancel' type='button'  data-bs-dismiss="modal">{{ gT('Cancel') }}</button>
                <button id='btnlsreplace' type='button' class='btn btn-outline-secondary'>
                    {{ gT('Replace') }}
                </button>
                <button id='btnlsinsert'  type='button' class='btn btn-primary'>
                    {{ gT('Add') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Save as labelset Modal -->
<div class="modal fade" id="saveaslabelModal" tabindex="-1" role="dialog" aria-labelledby="saveaslabelModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ gT('Save as label set') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="btn-group mb-3">
                    <input class="btn-check" type="radio" name="savelabeloption" id="newlabel">
                    <label class="btn btn-outline-secondary" for="newlabel">{{ gT('New label set') }}</label>
                    <input class="btn-check" type="radio" name="savelabeloption" id="replacelabel">
                    <label class="btn btn-outline-secondary" for="replacelabel">{{ gT('Replace the existing record.') }}
                </div>
            </div>

            <div class="modal-footer">
                <button class='btn btn-cancel' id='btnlacancel' type='button'  data-bs-dismiss="modal">{{ gT('Cancel') }}</button>
                <button id='btnsavelabelset' class='btn btn-primary' type='button'>
                    {{ gT('Save') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Confirm labelset replacement -->
<div class="modal fade" id="dialog-confirm-replaceModal" tabindex="-1" role="dialog" aria-labelledby="dialog-confirm-replaceModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ gT('Replace label set?') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>
                    <span id='strReplaceMessage'></span>
                </p>
            </div>

            <div class="modal-footer">
                <button class='btn btn-outline-secondary' id='btnlconfirmreplace' type='button' data-bs-dismiss="modal">{{ gT('OK') }}</button>
                <button class='btn btn-cancel'           id='btnlacancel'        type='button' data-bs-dismiss="modal">{{ gT('Cancel') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Script editor modal -->
<div class="modal fade" id="question-script-modal" tabindex="-1" aria-labelledby="question-script-modal-title" aria-hidden="true" data-default-title="{{ gT('Script editor') }}">
    <div class="modal-dialog modal-fullscreen" role="document">
        <div class="modal-content h-100">
            <div class="modal-header">
                <h5 class="modal-title" id="question-script-modal-title">{{ gT('Script editor') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 d-flex flex-column">
                <div id="question-script-modal-editor-container" class="position-relative flex-grow-1 w-100" style="min-height: 0;">
                    <div id="question-script-modal-editor" class="w-100 h-100"></div>
                </div>
            </div>
        </div>
    </div>
</div>
